<template>
  <div class="board-layout">
    <a-row
      type="flex"
      :gutter="space * 2"
      :style="{
        marginTop: -1 * space + 'px',
        marginBottom: -1 * space + 'px',
      }"
    >
      <a-col
        v-for="(item, index) of layouts"
        :key="item.key || index"
        v-bind="item.colSpan"
        :style="{ paddingTop: space + 'px', paddingBottom: space + 'px' }"
      >
        <div class="board-layout-wrap" :style="item.style">
          <slot v-if="typeof item.slot === 'string' && item.slot" :name="item.slot" :scope="item" />
          <slot v-else :scope="item" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'board-layout',
  props: {
    /* columns: [ { colSpan: 8 },... ] */
    columns: { type: Array, default: () => [] },
    gutter: { type: Number, default: 8 },
    colSpan: { type: [Number, Object], default: 8 },
    itemStyle: { type: Object, default: () => ({}) },
  },
  computed: {
    space() {
      const gutter = this.gutter / 2;
      return !isNaN(gutter) ? gutter : 4;
    },
    layouts() {
      if (!this.columns || !this.columns.length) return [];
      return this.columns.map((item) => {
        let { colSpan, style } = item || {};
        colSpan = this.getColSpan(colSpan);
        style = Object.assign({}, this.itemStyle, style);
        return Object.assign({}, item, { colSpan, style });
      });
    },
  },
  methods: {
    getColSpan(colSpan) {
      if (typeof colSpan === 'object' && colSpan) {
        return colSpan;
      }
      if (typeof colSpan === 'number') {
        return { span: colSpan };
      }
      return { span: this.colSpan };
    },
  },
};
</script>

<style scoped lang="less">
.board-layout {
  .board-layout-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 12px;
    overflow: hidden auto;
    background: transparent;
    box-shadow: 0 0 14px 2px inset rgba(49, 150, 250, 0.35);
    border: 1px solid rgba(164, 210, 255, 0.4);
    border-radius: 6px;
    opacity: 0.85;
    color: #fff;
  }
}
</style>
